<template>
    <div id="box">
        <h2>大麦评分</h2>
        <div class="comment">
            <div class="left"  v-for="good in good" :key="good.id">
                <h3>{{good.score}}</h3>
                <p>推荐</p>
                <span>{{good.people}}条</span>
            </div>
            <div class="right">
                <!-- 轮播图 -->
                <van-swipe vertical :autoplay="3000" >
                    <van-swipe-item v-for="score in scores" :key="score.star">                
                        <div class="discuss">
                            <h3>{{score.text}}</h3>
                            <div class="message">
                                <div><img :src="score.img" alt="">
                            </div>
                            <span>{{score.username}}</span>
                            </div>
                        </div>
                        
                    </van-swipe-item>
                </van-swipe>

            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios";

export default {
    name:"Score",
    data(){
        return{
            good:[],
            scores:[],
            num:"",
        }
    },
    methods:{
        gettotal(num) {
            return axios.get("/goods?id="+num)
        },
        getalone(num) {
            return axios.get("/good?id="+num)
        }
    },
    created(){
         this.num=this.$route.params.id ||this.$route.query.num;
        axios.all([this.gettotal(this.num),this.getalone(this.num)]).then(
            axios.spread((total,alone)=>{
                // console.log(total.data[0].named)
                this.good=total.data,
                this.scores=alone.data
                // console.log(this.good[0].named)
            })
        )
    },
}
</script>

<style scoped>
#box{
    height:1.25rem;
    margin: 0 auto;
    border-bottom: 0.1rem solid #f6f7f9
}
#box h2{
    font-size: 0.15rem;
    line-height: 0.37rem;
    margin-left: 0.18rem;
    margin-top: 0.06rem;
    float: left;
}
.comment{
    height: 0.63rem;
    width: 100%;
    float: left;
    margin-top: 0.05rem;
    margin-left: 0.18rem;
    width: 3.32rem;
}
.comment .left{
    width: 1.03rem;
    height: 100%;
    float: left;
    border-right: 1px solid #e3e3e3
}
.left h3{
    font-size: 0.35rem;
    color: #ff8d39;
    line-height: 0.63rem;
    float: left;
}
.left p{
    font-size: 0.11rem;
    color: #ff8d39;
    float: left;
    margin-top:0.15rem;
    margin-left: 0.1rem;
}
.left span{
    font-size: 0.11rem;
    color: #918f97;
    float: left;
    margin-top:0.05rem;
    margin-left: 0.1rem;
}
.comment .right{
    width: 2.27rem;
    height: 110%;
    float: right;
    overflow: hidden;
}
.right .discuss{
    width: 100%;
    height: 100%
}
.discuss h3{
    font-size: 0.11rem;
    line-height: 0.16rem;
    margin-left: 0.15rem
}
.message{
    height: 0.22rem;
    width: 100%; 
}
.message div{
    width:0.22rem;
    height: 0.22rem;
    border-radius: 50%;
    overflow: hidden;
    background: pink;
    margin-top: 0.1rem;
    margin-left: 0.15rem;
    float: left;
    position: relative;
}
.message div img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.message span{
    font-size: 0.1rem;
    color: #929196;
    float: left;
    margin-top: 0.12rem;
    margin-left: 0.1rem
}
</style>
